JSX (JavaScript XML) একটি সিনট্যাক্স এক্সটেনশন যা React-এর জন্য তৈরি করা হয়েছে। এটি JavaScript-এর মধ্যে HTML-like syntax ব্যবহারের মাধ্যমে UI (User Interface) তৈরি করতে ব্যবহৃত হয়। JSX আপনাকে HTML ট্যাগগুলির মতো কোড লিখতে দেয়, যা সহজেই React কম্পোনেন্টে রেন্ডার করা যায়। এটি মূলত JavaScript এবং HTML এর একটি মিশ্রণ এবং React এ ব্যবহার করা হয় UI কম্পোনেন্ট তৈরি করার জন্য।
JSX এর মূল বৈশিষ্ট্য
- HTML-like Syntax
JSX আপনাকে HTML এর মতো কোড লিখতে দেয়, যেমন<div>,<h1>,<button>ইত্যাদি, তবে এটি JavaScript এর মধ্যে ব্যবহৃত হয়। - React Elements তৈরি করা
JSX React কম্পোনেন্টের মধ্যে UI উপাদানগুলি (elements) তৈরি করতে ব্যবহৃত হয়। JSX ব্যবহার করে React এরcreateElementমেথডের মাধ্যমে HTML এলিমেন্ট তৈরি করা হয়। - প্রকাশ্য কম্পোনেন্ট রেন্ডারিং
JSX দ্বারা তৈরি কোডটি সরাসরি ব্রাউজারে HTML এ রূপান্তরিত হয় এবং তখন এটি ওয়েব পেজে প্রদর্শিত হয়। - JavaScript এক্সপ্রেশন সহ ব্যবহার
JSX এ আপনি JavaScript এক্সপ্রেশন ব্যবহার করতে পারেন, যেমন ভেরিয়েবল, ফাংশন কল, অপারেটর ইত্যাদি, যেগুলি{}দিয়ে ঘেরা থাকে।
JSX কীভাবে কাজ করে?
JSX এর কাজের প্রক্রিয়া হলো, React যখন JSX কোড দেখতে পায়, তখন এটি স্বয়ংক্রিয়ভাবে JavaScript কোডে রূপান্তরিত করে। আসলে, JSX একটি সিনট্যাক্স শর্টকাট যা React.createElement() মেথডের জন্য একটি সহজ পাঠ্য তৈরি করে। যখন আপনি JSX ব্যবহার করেন, React এই JSX কে React.createElement() মেথডে কনভার্ট করে এবং এটি আপনাকে React Element প্রদান করে। তারপর এটি আপনার UI-তে উপস্থাপন করা হয়।
ধরা যাক, আপনি একটি React কম্পোনেন্ট তৈরি করছেন:
function MyComponent() {
return <h1>Hello, World!</h1>;
}এই JSX কোডটি আসলে পরবর্তী JavaScript কোডে রূপান্তরিত হয়:
function MyComponent() {
return React.createElement('h1', null, 'Hello, World!');
}এখানে:
React.createElement()প্রথম আর্গুমেন্ট হিসেবে ট্যাগ ('h1'), দ্বিতীয় আর্গুমেন্ট হিসেবে প্রোপস (এখানেnull), এবং তৃতীয় আর্গুমেন্ট হিসেবে উপাদান কনটেন্ট ('Hello, World!') গ্রহণ করে।
JSX এর বৈধতা এবং নিয়ম
একমাত্র একটি রুট এলিমেন্ট
JSX-এর মধ্যে শুধুমাত্র একটিই রুট এলিমেন্ট থাকতে পারে। একাধিক এলিমেন্ট লিখতে চাইলে, তাদের একটি enclosing উপাদান (যেমন<div>,<section>,<React.Fragment>) এর মধ্যে রাখতে হবে।উদাহরণ:
// ভুল return ( <h1>Hello</h1> <p>Welcome</p> ); // সঠিক return ( <div> <h1>Hello</h1> <p>Welcome</p> </div> );JSX-এ অ্যাট্রিবিউটের নাম CamelCase স্টাইলে থাকে
HTML এর কিছু অ্যাট্রিবিউট যেমনclass,for,onclickইত্যাদি JSX-এ camelCase স্টাইলে লেখা হয়। উদাহরণস্বরূপ,classহয়ে যায়className,forহয়ে যায়htmlFor, এবংonclickহয়ে যায়onClick।উদাহরণ:
<div className="container">Content</div> <label htmlFor="input-id">Label</label>এক্সপ্রেশন ব্যবহার
JSX-এ JavaScript এক্সপ্রেশন{}এর মধ্যে লেখা হয়। উদাহরণস্বরূপ, আপনি একটি ভেরিয়েবল বা ফাংশন কল{}এর মধ্যে রাখতে পারেন।উদাহরণ:
const name = 'React'; return <h1>Hello, {name}!</h1>;
JSX ব্যবহার করার সুবিধা
- সহজ এবং পরিষ্কার কোড
JSX ব্যবহার করে আপনি HTML-কে JavaScript এর মধ্যে সহজেই ইন্টিগ্রেট করতে পারেন, যা কোড লেখাকে সহজ এবং পরিষ্কার করে তোলে। HTML এবং JavaScript এর মধ্যে বিভেদ কাটাতে সাহায্য করে। - ডায়নামিক কনটেন্ট রেন্ডারিং
JSX-এ আপনি JavaScript এক্সপ্রেশন ব্যবহার করতে পারেন, যা আপনাকে অ্যাপ্লিকেশনটির ডায়নামিক কনটেন্ট রেন্ডার করতে সহায়ক। আপনি ভেরিয়েবল, ফাংশন কল ইত্যাদি{}এর মধ্যে ব্যবহার করতে পারবেন। - React এ কোড লেখা সহজ করে
React কম্পোনেন্টের মধ্যে UI তৈরি করতে JSX ব্যবহার করার মাধ্যমে ডেভেলপাররা আরও দ্রুত এবং সহজে অ্যাপ্লিকেশন ডেভেলপ করতে পারে। কারণ JSX স্বাভাবিক HTML এর মতোই দেখায় এবং React কম্পোনেন্টে রেন্ডার করা যায়। - ডিবাগিং এবং মেইন্টেন্যান্স সহজ
JSX কোড HTML-এর মতো দেখতে হওয়ায় ডেভেলপারদের জন্য কোড পড়া এবং ডিবাগিং করা সহজ হয়ে যায়।
সারাংশ
JSX হল একটি JavaScript Syntax Extension যা React কম্পোনেন্ট তৈরি করতে সাহায্য করে। এটি JavaScript এর মধ্যে HTML-like syntax ব্যবহারের মাধ্যমে UI তৈরি করতে সহায়ক। JSX ব্যবহার করলে React এর মাধ্যমে অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও সহজ, পরিষ্কার এবং ডায়নামিক হয়ে ওঠে। React নিজে JSX কোডটিকে স্বয়ংক্রিয়ভাবে JavaScript এ কনভার্ট করে, যা শেষে React Elements তৈরি করে এবং UI-তে প্রদর্শিত হয়।
Read more
